import { Meta } from '@storybook/blocks';

import * as AnimatedSizeStories from '../stories/AnimatedSize.stories';

<Meta of={AnimatedSizeStories} />

# AnimatedSize

Animated widget that automatically transitions its size over a given duration whenever the given child's size changes.

## Example

```dart liveslice=AnimatedSize height=400px
bool _first = true;

double _width = 200;
double _height = 200;

@override
Widget build(BuildContext context) {
  return Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Container(
        height: 300,
        child: Center(
          child: AnimatedSize(
            duration: const Duration(milliseconds: 500),
            curve: Curves.fastOutSlowIn,
            child: Container(
              width: _width,
              height: _height,
              color: Colors.blue,
            ),
            vsync: this,
          ),
        ),
      ),
      SizedBox(height: 20,),
      RaisedButton(
        child: const Text('CLICK ME!'),
        onPressed: () {
          setState(() {
            _width  = _first ?  220 : 200;
            _height = _first ?  160 : 200;

            _first = !_first;
          });
        },
      ),
    ],
  );
}
```

## Related Links

- https://api.flutter.dev/flutter/widgets/AnimatedSize-class.html
